<template>
<div class="product">
  <div class="container">
    <product-head>
      <template v-slot:btn>
        <div @click="tobuy">立即购买</div>
      </template>
    </product-head>
    <div class="product-content">
      <div class="item-bg">
        <h2>{{productList.name}}</h2>
        <h3>{{productList.subtitle}}</h3>
        <p> 全球首款双频GP<span>|</span> 骁龙845 <span>|</span> AI变焦双摄 <span>|</span>红外人脸识别</p>
        <div class="price">
          ￥{{productList.price}}
        </div>
      </div>
      <div class="item-bg2"></div>
      <div class="item-bg3"></div>
      <div class="swiper-wrap">
        <swiper :options="swiperOptions">
          <swiper-slide><img src="/imgs/product/gallery-2.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-3.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-4.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-5.jpg" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-6.jpg" alt=""></swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
        <p class="desc">小米8 AI变焦双摄拍摄</p>
      </div>
      <div class="item-video">
        <div class="video-h2">
          <h2>60帧超慢动作摄影</h2>
          <h2>慢慢回味每一瞬间的精彩</h2>
        </div>
        <p>后置960帧电影般超慢动作，将眨眼间的美妙展现得淋漓尽致<br>更能AI精准分析视频内容，15哥场景智能匹配背景音效</p>
        <div class="video-bg" @click="openShowSlide"></div>
        <div class="video-wrap" v-show="showSlide">
<!--          //遮罩层-->
          <div class="mask"></div>
          <div class="video">
            <span @click="shutShowSlide">X</span>
            <video src="../../public/imgs/product/video.mp4" muted autoplay controls="controls"></video>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {SwiperSlide,Swiper} from "vue-awesome-swiper";
import productHead from '../components/ProducrHead/ProductHead'
export default {
name: "product",
  data(){
    return{
      swiperOptions:{
        slidesPerView:3,
        autoplay:true,
        spaceBetween: 30,
        pagination: {
          el: '.swiper-pagination',
        },
      },
      showSlide:false,
      productList:{}
    }
  },
  components:{
    productHead,
    SwiperSlide,
    Swiper
  },
  created() {
    this.getProduct()
  },
  methods:{
    openShowSlide(){
      this.showSlide = true
    },
    shutShowSlide(){
      this.showSlide = false
    },
    getProduct(){
      this.axios.get(`/products/${this.$route.params.id}`).then(res=>{
        this.productList = res;
      })
    },
    tobuy(){
      this.$router.push(`/detail/${this.$route.params.id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/scss/base.scss";
@import "../assets/scss/mixin.scss";
.product{
  .container{
    .product-content{
      .item-bg{
        height: 718px;
        text-align: center;
        background: url("/imgs/product/product-bg-1.png") no-repeat center;
        h2{
          padding-top: 50px;
          font-size: 80px;
        }
        h3{
          font-size: 24px;
          letter-spacing:10px;
        }
        p{
          margin-top: 21px;
          margin-bottom: 40px;
          font-size: 16px;
          color: #333333;
          span{
            margin:0 10px;
          }
        }
        .price{
          font-size: 33px;
          color: #333333;
        }
      }
      .item-bg2{
        height: 480px;
        background: url("/imgs/product/product-bg-2.png") no-repeat center;
        background-size:1126px 397px;
      }
      .item-bg3{
        height: 638px;
        background: url("/imgs/product/product-bg-3.png") no-repeat center;
        background-size:cover;
      }
      .swiper-wrap{
        margin-top: 36px;
        margin-bottom: 52px;
        .swiper-container{
          z-index: 1;
          .swiper-slide{
            img{
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
        .desc{
          font-size: 18px;
          color: #333333;
          text-align: center;
        }
      }
      .item-video{
        height: 1044px;
        background-color: #070708;
        color: #ffffff;
        text-align: center;
        margin-bottom: 76px;
        .video-h2{
          padding-top: 82px;
          margin-bottom: 47px;
          font-size: 60px;
        }
        p{
          font-size: 24px;
          margin-bottom: 58px;
        }
        .video-bg{
          height: 540px;
          width: 100%;
          background: url("/imgs/product/gallery-1.png") no-repeat center;
          background-size: cover;
        }
        .video-wrap{
          .mask{
            @include position(fixed);
            height: 100%;
            background-color:#333333;
            opacity:.4;
            z-index:101;
          }
          .video{
            position:fixed;
            top:13%;
            left:13%;
            z-index:101;
            width:1000px;
            height:536px;
            opacity:1;
            video{
              width: 100%;
              height: 100%;
            }
          }
          span{
            position: absolute;
            right: 30px;
            top:15px;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
            font-size: 20px;
            background-color: rgba(0,0,0,.5);
            z-index: 102;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
